<template>
  <div>
    <!--header部分-->
    <div class="header">
      <div class="zhong">
        <!--字体-->
        <img src="../assets/images/logo.png" />
        <!--个人中心-->
        <div class="name">
          <Dropdown
            style="margin-left: 20px"
            placement="bottom-end"
            @on-click="userInfo"
          >
            <a style="color: #333333;font-size:18px" href="javascript:void(0)">
              <img
                src="../assets/images/people.png"
                style="width: 23px;height: 23px"
              />&nbsp;&nbsp;{{ name }}
              <Icon color="#3B50A1" type="ios-arrow-down"></Icon>
            </a>
            <DropdownMenu slot="list">
              <!-- <DropdownItem ><span trigger="click"  v-on:click="people()"> 个人中心</span></DropdownItem>
              <DropdownItem ><span trigger="click"  v-on:click="esc()"> 退出</span></DropdownItem> -->
              <Dropdown-Item name="personal">个人中心</Dropdown-Item>
              <Dropdown-Item name="logout">退出</Dropdown-Item>
            </DropdownMenu>
          </Dropdown>
        </div>
        <!--首页-->
        <div class="shou">
          首页
        </div>
      </div>
    </div>
    <!--内容部分-->
    <div class="content">
      <!--考试-->
      <div
        v-for="(goexamArray, index) in goexamArray"
        v-show="goexam"
        style="width: 1020px;margin-top: 21px"
        class="goexam"
      >
        <div class="goexam-bt">
          {{ goexamArray.name }}
        </div>
        <div class="goexam-time">
          考试时间{{ goexamArray.beginTime.replace(/T/g, " ") }}
        </div>
        <div
          class="goexam-btn"
          @click="
            goexamBtn(goexamArray.id, goexamArray.isOpen, goexamArray.examTime)
          "
        >
          开始考试
        </div>

        <div class="poo">
          <img src="../assets/images/laba.png" />
          <span @click="modal(goexamArray.announcement)">考试公告</span>
        </div>
      </div>
      <Modal v-model="modal1" title="考试公告">
        {{ announcement }}
      </Modal>
      <!--考试结束-->
      <!--九宫格-->
      <div class="div" v-for="todo in todos">
        <div class="topicImg">
          <img :src="require(`../assets/images/a${todo.icon}.png`)" />
        </div>
        <div class="topicName">{{ todo.name }}</div>
        <div class="hover">
          <div>
            <div v-on:click="exam(todo.id, todo.name)" class="hover1">
              模拟考试
            </div>

            <div v-on:click="question(todo.id, todo.name)" class="hover1">
              试题库
            </div>
            <div v-on:click="rank(todo.id, todo.name)" class="hover1">
              排行榜
            </div>
          </div>
        </div>
        <div class="serial">
          <div class="fontStyle">{{ todo.serial }}</div>
          <div class="serialStyle" :class="todo.serialStyle"></div>
        </div>
      </div>
      <!--九宫格结束-->
      <!--排行榜-->
      <!-- <div @click="paihang()" style="background: red">
          排行榜
        </div> -->
      <!--排行榜结束-->
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      goexam: true, //是否有考试
      goexamArray: [], //考试数组
      announcement: "", //公告內容
      modal1: false, //公告
      name: "", //用户名称
      color: [
        "background:#0078D7",
        "background:#FFC90D",
        "background:#B18FFF",
        "background:#0EC352",
        "background:#124A92",
        "background:#4091FF",
        "background:#F54693",
        "background:#FC20D8",
        "background:#7B1CDC",
        "background:#FF9140"
      ],
      serialStyle: [
        "serial1",
        "serial2",
        "serial3",
        "serial4",
        "serial5",
        "serial6",
        "serial7",
        "serial8"
      ],
      todos: [] //    {id:1,serial:'01', text: '水利局1', background:'background:#0078D7'},
    };
  },
  methods: {
    userInfo(name) {
      if (name === "personal") {
        this.people();
      } else {
        this.esc();
      }
    },
    esc: function() {
      //跳转之前清除下缓存
      this.$cookies.remove('pcexam_id');//用户id
      this.$cookies.remove('pcexam_username');//用户名
      this.$cookies.remove('pcexam_name');//用户名
      this.$cookies.remove('pcexam_phone');//电话
      this.$cookies.remove('pcexam_position');//职务
      this.$cookies.remove('pcexam_departmentId');//部门id
      this.$router.push('/login')
    },
    people: function() {
      //点击个人中心
      console.log("个人中心");
      this.$router.push({
        //核心语句
        path: "/wholeCenter", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
        }
      });
    },
    exam: function(examId, examname) {
      //点击模拟考试
      console.log(examId);
      console.log(examname);
      this.$router.push({
        //核心语句
        path: "/wholeMock", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          examId: examId,
          examname: examname
        }
      });
    },
    question: function(examId, examname) {
      //点击试题库
      console.log(examId);
      console.log(examname);
      this.$router.push({
        //核心语句
        path: "/wholeMock/itemBank", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          examId: examId,
          examname: examname
        }
      });
    },
    rank: function(examId, examname) {
      //点击试题库
      console.log(examId);
      console.log(examname);
      this.$router.push({
        //核心语句
        path: "wholeMock/ranking", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          examId: examId,
          examname: examname
        }
      });
    },
    goexamBtn: function(examId, isOpen, examTime) {
      if (isOpen == 0) {
        this.$Message.warning("考试暂未开启");
      } else {
        //跳转页面
        this.$router.push({
          //核心语句
          path: "/exam", //跳转的路径
          query: {
            //路由传参时push和query搭配使用 ，作用时传递参数
            examId: examId,
            isOpen: isOpen,
            examTime: examTime
          }
        });
      }
    },
    paihang() {
      //排行榜跳转
      this.$router.push({
        //核心语句
        path: "/wholeKing", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          //              id:this.id ,
        }
      });
    },
    axiosExamtFindAll() {
      //获取考试
      var id = this.$cookies.get("pcexam_id");
      this.$axios({
        url: "web/home/exam/findAll/" + id,
        method: "GET",
        data: {},
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        transformRequest: [
          function(data) {
            //json
            data = JSON.stringify(data);
            return data;
          }
        ]
      })
        .then(response => {
          // console.log(response.data);
          if (response.data.length == 0) {
            this.goexam = false;
          } else {
            this.goexam = true;
            this.goexamArray = response.data;
            console.log(this.goexamArray);
          }
        })
        .catch(error => {
          console.log("调取失败500");
          this.$Message.error("获取失败！");
        });
    },
    axiosSubjectFindAll() {
      //获取专题
      this.$axios({
        url: "web/home/subject/findAll",
        method: "POST",
        data: {},
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        transformRequest: [
          function(data) {
            //json
            data = JSON.stringify(data);
            return data;
          }
        ]
      })
        .then(response => {
          console.log(response.data);
          for (var i = 0; i < response.data.length; i++) {
            var num = Math.floor(Math.random() * 10 + 1);
            var number;
            if (i < 9) {
              number = "0" + (i + 1);
            } else {
              number = i + 1;
            }

            this.todos.push({
              id: response.data[i].id,
              name: response.data[i].name,
              background: this.color[num - 1],
              serial: number,
              serialStyle: this.serialStyle[i],
              icon: response.data[i].icon
            });
          }
          //长度变长逻辑
          // var a=0;
          // for(var z=0;z<this.todos.length;z++){

          //   console.log("123")
          //   a++
          //   if (a<=10){
          //     if(a==4){
          //       var col=this.todos[z].background
          //       this.todos[z].background=col+';width:660px;';
          //     }
          //     if(a==10){
          //       var col=this.todos[z].background
          //       this.todos[z].background=col+';width:660px;';
          //       a=0;
          //     }
          //   }else {
          //     a=0;
          //   }
          // }
          //console.log(this.todos)
        })
        .catch(error => {
          console.log("调取失败500");
          this.$Message.error("获取失败！");
        });
    },
    modal: function(noice) {
      this.modal1 = true;
      this.announcement = noice;
    }
  },
  mounted: function() {
    if (
      this.$cookies.get("pcexam_username") == undefined ||
      this.$cookies.get("pcexam_username") == "undefined" ||
      this.$cookies.get("pcexam_username") == "" ||
      this.$cookies.get("pcexam_username") == null ||
      this.$cookies.get("pcexam_username") == "null"
    ) {
      this.$router.push("/login");
    } else {
      this.name = this.$cookies.get("pcexam_username");
      //查看是否有考试
      this.axiosExamtFindAll();
      //获取专题
      this.axiosSubjectFindAll();
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  width: 100%;
  height: 218px;
  background-image: url("../assets/images/shou-banner.png");
  background-size: cover;
}
.zhong {
  width: 1000px;
  height: 218px;
  margin: 0 auto;
  position: relative;
}
.zhong img {
  /* width:351px;
    height:59px; */
  margin-top: 62px;
}
.name {
  position: absolute;
  bottom: 17px;
  right: 0px;
}
.shou {
  position: absolute;
  bottom: 17px;
  left: 0px;
  font-size: 18px;
  color: rgba(51, 51, 51, 1);
}
.content {
  width: 1080px;
  height: 100%;
  margin: auto;
  padding-bottom: 30px;
  padding-left: 20px;
}
.content > div {
  width: 240px;
  height: 240px;
  /* background:rgba(255,255,255,1); */
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
  margin: 19px 19px 0 0;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.topicImg {
  margin-top: 60px;
  margin-bottom: 20px;
  display: inline-block;
  width: 100%;
  height: 51px;
}
.topicName {
  margin: 0 auto;
  font-size: 24px;
  display: inline-block;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 24px;
}
.div {
  position: relative;
}

@keyframes myfirst {
  0% {
    top: 200px;
  }
  100% {
    top: 0px;
  }
}
.content > div:hover .hover {
  animation: myfirst 0.3s linear;
  animation-fill-mode: forwards;
  display: block;
}
.hover {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 200px;
  font-size: 20px;
  left: 0;
  display: none;
  background: rgba(38, 98, 200, 0.9);
  color: white;
  z-index: 2;
}
.hover > div {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -60px;
  margin-top: -85px;
}
.hover1 {
  border-radius: 50px;
  width: 130px;
  height: 38px;
  border: 1px solid white;
  line-height: 38px;
}
.hover1:nth-of-type(1),
.hover1:nth-of-type(2) {
  margin-bottom: 20px;
}
.hover1:hover {
  background: white;
  color: black;
}
.serial {
  line-height: 57px;
  width: 66px;
  height: 57px;
  position: absolute;
  top: 0;
  left: 0;
}
.fontStyle {
  font-size: 72px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 92, 205, 1);
  opacity: 0.15;
}
.serialStyle {
  position: absolute;
  width: 100%;
  height: 59px;
  z-index: 1;
  background-position: 25px center;
  background-repeat: no-repeat;
  opacity: 1.5;
  top: 0;
  left: 0;
}
.serial1 {
  background-image: url(../assets/images/bg1.png);
}
.serial2 {
  background-image: url(../assets/images/bg2.png);
}
.serial3 {
  background-image: url(../assets/images/bg3.png);
}
.serial4 {
  background-image: url(../assets/images/bg4.png);
}
.serial5 {
  background-image: url(../assets/images/bg5.png);
}
.serial6 {
  background-image: url(../assets/images/bg6.png);
}
.serial7 {
  background-image: url(../assets/images/bg7.png);
}
.serial8 {
  background-image: url(../assets/images/bg8.png);
}
.goexam {
  background: rgba(36, 72, 133, 1) !important;
  line-height: 20px;
  position: relative;
}
.goexam-bt {
  margin: 59px 0 17px 0;
  line-height: 36px;
  font-size: 36px;
  color: rgba(255, 255, 255, 1);
}
.goexam-time {
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 25px;
  color: rgba(255, 255, 255, 1);
}
.goexam-btn {
  margin: 0 auto;
  width: 170px;
  height: 51px;
  opacity: 0.5;
  border: 1px solid white;
  border-radius: 26px;
  font-size: 24px;
  line-height: 51px;
  color: rgba(255, 255, 255, 1);
}
.goexam-btn:hover {
  opacity: 1;
}
.poo {
  line-height: 12px;
  position: absolute;
  bottom: 21px;
  left: 22px;
  font-size: 18px;
  color: white;
}
.poo img {
  width: 21px;
  height: 19px;
  margin-right: 5px;
  margin-bottom: -2px;
}
</style>
